<template>
  <view class="ar-scan-container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @tap="handleBack">
        <text class="iconfont icon-back">&#xe60e;</text>
      </view>
      <view class="title">AR扫描</view>
    </view>

    <!-- AR场景容器 -->
    <view class="ar-container" v-if="showAR">
      <view class="loading-mask" v-if="isLoading">
        <view class="loading-content">
          <image class="loading-icon" src="/static/ar-loading.svg"></image>
          <text class="loading-text">AR加载中 {{loadingProgress}}%</text>
        </view>
      </view>
      
      <!-- Kivicube AR组件 -->
      <view class="kivicube-container">
        <kivicube-scene
          class="kivicube"
          :scene-id="sceneId"
          @ready="handleReady"
          @downloadProgress="handleDownloadProgress"
          @loadSceneStart="handleLoadSceneStart"
          @loadSceneEnd="handleLoadSceneEnd"
          @downloadFinish="handleDownloadFinish"
          @error="handleError"
        ></kivicube-scene>
      </view>
      
      <!-- 底部操作区 -->
      <view class="ar-controls">
        <view class="tip-text">对准识别图，体验AR效果</view>
        <view class="take-photo-btn" @tap="handleTakePhoto">
          <view class="photo-circle"></view>
        </view>
      </view>
    </view>
    
    <!-- 扫描引导/入口 -->
    <view class="scan-entry" v-if="!showAR">
      <image class="scan-image" src="/static/ar-scan.svg" mode="aspectFit"></image>
      <text class="scan-title">AR赣傩文化体验</text>
      <text class="scan-desc">扫描指定识别图，体验AR赣傩面具</text>
      <button class="scan-btn" @tap="startARScan">开始扫描</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 状态定义
const sceneId = ref(''); // 从平台获取的Kivicube场景ID
const showAR = ref(false);
const isLoading = ref(false);
const loadingProgress = ref(0);
const kivicubeScene = ref(null);

// 生命周期钩子
onLoad((options) => {
  // 如果从页面传入场景ID，则使用传入的
  if (options.sceneId) {
    sceneId.value = options.sceneId;
  } else {
    // 默认场景ID，请替换为您在Kivicube平台创建的场景ID
    sceneId.value = "替换为您的Kivicube场景ID";
  }
});

// 方法定义
// 开始AR扫描
const startARScan = () => {
  showAR.value = true;
};

// 返回上一页
const handleBack = () => {
  if (showAR.value) {
    showAR.value = false;
  } else {
    uni.navigateBack();
  }
};

// Kivicube事件处理函数
const handleReady = (e) => {
  console.log("AR组件准备就绪", e);
  kivicubeScene.value = e.detail.value;
};

const handleDownloadProgress = (e) => {
  console.log("下载进度", e);
  const progress = Math.floor(e.detail.progress * 100);
  loadingProgress.value = progress;
};

const handleLoadSceneStart = () => {
  console.log("场景开始加载");
  isLoading.value = true;
};

const handleLoadSceneEnd = () => {
  console.log("场景加载完成");
  isLoading.value = false;
};

const handleDownloadFinish = () => {
  console.log("资源下载完成");
};

const handleError = (e) => {
  console.error("AR错误", e);
  uni.showToast({
    title: "AR加载失败，请检查网络后重试",
    icon: "none"
  });
  showAR.value = false;
};

// 拍照功能
const handleTakePhoto = () => {
  if (!kivicubeScene.value) return;
  
  try {
    kivicubeScene.value.takePhoto({
      success: (res) => {
        const { tempImagePath } = res;
        
        // 显示拍照结果预览
        uni.previewImage({
          urls: [tempImagePath],
          current: tempImagePath
        });
        
        // 可选：保存到相册
        uni.saveImageToPhotosAlbum({
          filePath: tempImagePath,
          success: () => {
            uni.showToast({
              title: "已保存到相册",
              icon: "success"
            });
          },
          fail: () => {
            uni.showToast({
              title: "保存失败，请授权相册权限",
              icon: "none"
            });
          }
        });
      },
      fail: (error) => {
        console.error("拍照失败", error);
        uni.showToast({
          title: "拍照失败，请重试",
          icon: "none"
        });
      }
    });
  } catch (error) {
    console.error("拍照出错", error);
  }
};
</script>

<style>
.ar-scan-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  padding-top: 40px;
  z-index: 100;
  display: flex;
  align-items: center;
  padding-left: 15px;
  background: rgba(0,0,0,0.4);
}

.back-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-back {
  color: #fff;
  font-size: 24px;
}

.title {
  color: #fff;
  font-size: 18px;
  margin-left: 10px;
}

.ar-container {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
}

.kivicube-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.kivicube {
  width: 100%;
  height: 100%;
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-icon {
  width: 80px;
  height: 80px;
}

.loading-text {
  color: #fff;
  font-size: 16px;
  margin-top: 10px;
}

.ar-controls {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}

.tip-text {
  color: #fff;
  font-size: 14px;
  margin-bottom: 20px;
  background-color: rgba(0,0,0,0.5);
  padding: 8px 15px;
  border-radius: 20px;
}

.take-photo-btn {
  width: 70px;
  height: 70px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.photo-circle {
  width: 56px;
  height: 56px;
  background-color: #fff;
  border-radius: 50%;
}

.scan-entry {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.scan-image {
  width: 200px;
  height: 200px;
  margin-bottom: 30px;
}

.scan-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.scan-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
}

.scan-btn {
  width: 200px;
  height: 50px;
  background-color: #2878FF;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25px;
  font-size: 16px;
}
</style> 